<template>
  <div>
    <div class="xqbox1">
      <van-swipe @change="onChange" class="imgitem" :autoplay="3000">
        <van-swipe-item
          ><img :src="goodinfo.GoodsPic" width="100%"
        /></van-swipe-item>
        <van-swipe-item v-for="item in list" :key="item.smallPicID"
          ><img :src="item.smallPic" width="100%"
        /></van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/5</div>
        </template>
      </van-swipe>

      <p class="tit">
        {{ goodinfo.GoodsName }}
      </p>
      <div class="qita">
        <p class="p1">￥{{ goodinfo.GoodsPrice }}<span>新品促销</span></p>
        <p class="p2">全国包邮 | 销量488</p>
      </div>
    </div>
    <div @click="show = true" class="xqbox2 sizetype">
      <div class="xqbox2L">
        <span
          >已选：<van-tag color="#ffe1e1" text-color="#ad0000">{{
            goodsparams.Color
          }}</van-tag
          >&nbsp;<van-tag color="#ffe1e1" text-color="#ad0000">{{
            goodsparams.Size
          }}</van-tag
          >&nbsp;数量：<van-tag color="#ffe1e1" text-color="#ad0000">{{
            goodsparams.goodsNum
          }}</van-tag></span
        >
      </div>
      <div class="xqbox2R">
        <img
          src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/more.png"
        />
      </div>
    </div>

    <div>
      <van-popup
        v-model="show"
        closeable
        round
        position="bottom"
        get-container=".bxt"
        :style="{ height: '80%' }"
      >
        <div class="size1">
          <div class="size1_1">
            <img :src="goodinfo.GoodsPic" @click="PreviewImg" />
          </div>
          <div class="size1_2">
            <p class="p1">￥{{ goodinfo.GoodsPrice }}</p>
            <p class="p2">
              剩余：<span>{{ goodinfo.GoodsNum }}</span>
            </p>
            <p class="p3">
              请选择尺寸：<span v-if="parshow"
                >已选：<van-tag color="#ffe1e1" text-color="#ad0000">{{
                  goodsparams.Color
                }}</van-tag
                >&nbsp;<van-tag color="#ffe1e1" text-color="#ad0000">{{
                  goodsparams.Size
                }}</van-tag
                >&nbsp;数量：<van-tag color="#ffe1e1" text-color="#ad0000">{{
                  goodsparams.goodsNum
                }}</van-tag></span
              >
            </p>
          </div>
        </div>
        <div class="size2">
          <div class="size2_1">
            <p class="tit">颜色</p>
            <div>
              <van-button
                :class="item.ColorID == selected ? 'selected' : ''"
                @click="changpic(item.Pic, item)"
                v-for="item in $store.state.color"
                :key="item.ColorID"
                :icon="item.Pic"
                type="info"
                >{{ item.Color }}</van-button
              >
            </div>
          </div>
          <div class="size2_1">
            <p class="tit">尺码</p>
            <div class="btnitm">
              <van-button
                :class="item == preimg ? 'selected' : ''"
                @click="changsize(item)"
                v-for="item in $store.state.size"
                :key="item"
                type="info"
                >{{ item }}</van-button
              >
            </div>
          </div>
          <div class="size2_1 num">
            <p class="tit">购买数量</p>
            <div class="numbox">
              <van-stepper
                v-model="goodsparams.goodsNum"
                input-width="40px"
                button-size="32px"
              />
            </div>
          </div>
        </div>
        <div class="size3">
          <div class="btnbox">
            <van-button @click="Buyit()" class="btn_1" type="warning"
              >加入购物车</van-button
            >
            <van-button class="btn_2" @click="BuyitNow" type="danger"
              >立即购买</van-button
            >
          </div>
        </div>
      </van-popup>
    </div>
    <div>
      <van-goods-action>
        <van-goods-action-icon @click="toKefu" icon="chat-o" text="客服" dot />
        <van-goods-action-icon
          icon="cart-o"
          @click="$router.push('/Cat')"
          :badge="catNum"
          text="购物车"
        />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button
          @click="Buyit()"
          type="warning"
          text="加入购物车"
        />
        <van-goods-action-button
          @click="show = true"
          type="danger"
          text="立即购买"
        />
      </van-goods-action>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { ImagePreview } from "vant";
export default {
  props: { goods: Array, list: Array, pre: String, color: Object },
  data() {
    return {
      show: false,
      value: 1,
      catNum: 0,
      goodinfo: {
        GoodsID: "",
        GoodsName: "",
        GoodsPrice: "",
        Discount: "",
        GoodsPic: "",
        Parameters: "",
        GoodsNum: "",
      },
      current: 0,
      selected: 1,
      preimg: "",
      colorItem: "",
      goodsparams: {
        GoodName: "",
        GoodsPrice: "",
        GoodsPic: "",
        UserID: "",
        Color: "",
        Size: "",
        goodsNum: 1,
        TypeID: "",
        GoodsID: "",
      },
      titlmsg: "",
      parshow: true,
    };
  },
  mounted() {},
  created() {},
  activated() {},
  methods: {
    toKefu() {
      this.$store.commit("setfriID", 1);
      this.$router.push("/CustomerServiceChat");
    },
    async getgoods() {
      this.goods.map((item) => {
        this.goodinfo.GoodsID = item.GoodsID;
        this.goodinfo.GoodsName = item.GoodsName;
        this.goodinfo.GoodsPrice = item.GoodsPrice;
        this.goodinfo.Discount = item.Discount;
        this.goodinfo.GoodsNum = item.GoodsNum;

        this.goodinfo.GoodsPic = this.imgUrl + item.GoodsPic;
        this.goodsparams.TypeID = item.TypeId;
        this.goodsparams.GoodsID = item.GoodsID;
        this.goodinfo.Parameters = item.Parameters;

        this.$store.commit("getParameters", item.Parameters);
      });
      this.list.forEach((item) => {
        item.smallPic = this.imgUrl + item.smallPic;
      });
    },
    //获取购物车数量
    async getShopCatnum() {
      try {
        const { data: res } = await this.$http.get("shopCatList", {
          params: { UserID: this.emailLogin[0].userID },
        });
        this.catNum = res.data.length;
        console.log(res);
      } catch (error) {}
    },
    BuyitNow() {
      if (this.goodsparams.Color == "") {
        this.$toast({
          message: "请选择颜色",
          position: "top",
        });
      } else if (this.goodsparams.Size == "") {
        this.$toast({
          message: "请选择尺寸",
          position: "top",
        });
      } else {
        let arr = [];
        var param = {};
        param.Color = this.goodsparams.Color;
        param.GoodName = this.goodinfo.GoodsName;
        param.GoodsID = this.goodsparams.GoodsID;
        param.GoodsPic = this.goodinfo.GoodsPic;
        param.GoodsPrice = this.goodinfo.GoodsPrice;
        param.Size = this.goodsparams.Size;
        param.TypeID = this.goodsparams.TypeID;
        param.UserID = this.emailLogin[0].userID;
        param.goodsNum = this.goodsparams.goodsNum;
        param.goods_state = true;
        arr.push(param);
        this.$store.commit("setCheckoutList", arr);
        this.$store.commit(
          "setTotol",
          parseFloat(this.goodinfo.GoodsPrice * this.goodsparams.goodsNum, 2)
        );

        this.$router.push("/checkout");
        this.show = false;
      }
    },
    onChange(index) {
      this.current = index;
    },
    changpic(url, item) {
      this.goodinfo.GoodsPic = url;
      this.selected = item.ColorID;
      this.goodsparams.Color = item.Color;

      this.parshow = true;
    },
    changsize(val) {
      this.preimg = val;
      this.goodsparams.Size = val;
      this.parshow = true;
    },
    async Buyit() {
      if (this.goodsparams.Color == "") {
        this.$toast({
          message: "请选择颜色",
          position: "top",
        });
      } else if (this.goodsparams.Size == "") {
        this.$toast({
          message: "请选择尺寸",
          position: "top",
        });
      } else {
        const { data: res } = await this.$http.get("isGoods", {
          params: { Color: this.goodsparams.Color },
        });
        if (res.status === 200) {
          this.$toast.success("已加入购物车");
        } else {
          this.goodsparams.GoodName = this.goodinfo.GoodsName;
          this.goodsparams.GoodsPrice = this.goodinfo.GoodsPrice;
          this.goodsparams.GoodsPic = this.goodinfo.GoodsPic;
          this.goodsparams.UserID = this.emailLogin[0].userID;

          const { data: res } = await this.$http.post(
            "addCat",
            this.goodsparams
          );
          if (res.status !== 200) {
            this.$toast({
              message: "添加购物车失败",
              position: "top",
            });
          } else {
            this.$toast.success("加入购物车！");
            this.catNum += 1;
            this.parshow = false;
          }
        }
      }
    },
    PreviewImg() {
      let arr = [];
      this.$store.state.color.forEach((e) => {
        arr.push(e.Pic);
      });

      ImagePreview({
        images: arr,
        startPosition: 0,
        loop: true,
        showIndicators: true,
        swipeDuration: 300,
      });
    },
  },
  computed: {
    ...mapState(["emailLogin"]),
  },
  watch: {
    goods() {
      this.getgoods();
      this.getShopCatnum();
    },
    pre() {
      this.preimg = this.pre;
      this.goodsparams.Size = this.pre;
    },
    color() {
      this.goodsparams.Color = this.color.Color;
      this.selected = this.color.ColorID;
    },
  },
};
</script>
<style lang="less" scoped>
.xqbox1 {
  width: 100%;
  background: #fff;
  padding-bottom: 0.5rem;
  .tit {
    color: #333;
    line-height: 1rem;
    padding: 0.6rem;
    font-size: 0.9rem;
    padding-bottom: 0.1rem;
    font-weight: 600;
  }
  .qita {
    width: 100%;
    height: 2rem;
    .p1 {
      float: left;
      font-size: 1.5rem;
      color: #f2270c;
      padding: 0 0.6rem;
      height: 2rem;
      font-weight: 600;
      line-height: 2.5rem;
      span {
        background: #ff2150;
        padding: 0.1rem 0.3rem;
        color: #fff;
        margin-left: 0.3rem;
        font-size: 0.6rem;
        -webkit-text-size-adjust: none;
      }
    }
    .p2 {
      color: #666;
      font-size: 0.75rem;
      height: 2rem;
      line-height: 2rem;
      text-align: right;
      padding-right: 0.6rem;
    }
  }
}
.xqbox2 {
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 0.5rem 0.6rem;
  height: 1.5rem;
  margin: 0.9375rem 0;
  .xqbox2L {
    float: left;
    width: 90%;
    overflow: hidden;

    span {
      color: #666;
      height: 1.5rem;
      line-height: 1.5rem;
      font-size: 0.9rem;
      white-space: nowrap;
    }
  }
  .xqbox2R {
    float: right;
    max-width: 50%;
    overflow: hidden;
    img {
      float: right;
      height: 1rem;
      margin-top: 0.25rem;
    }
  }
}
.size1 {
  padding: 1rem 1rem;
  position: relative;
  .size1_1 {
    float: left;
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    padding-right: 1rem;
    img {
      width: 100%;
    }
  }
}
.size1 .size1_2 {
  flex: 1;
  .p1 {
    color: #ee0a24;
    font-size: 1.375rem;
    position: relative;
    top: 20px;
  }
  .p2 {
    color: #999;
    font-size: 1rem;
    padding-top: 0.4rem;
    line-height: 4.2rem;
  }
  .p3 {
    color: #999;
    font-size: 0.9rem;
    line-height: 1.2rem;
    span {
      color: black;
      font-size: 0.75rem;
    }
  }
}
.size2 {
  padding: 1rem 1rem;
  margin-bottom: 3.75rem;
  .size2_1 {
    border-top: 1px solid #eee;
    padding-bottom: 0.5rem;
    .tit {
      font-size: 1rem;
      color: #333;
      padding: 0.6rem 0 0.3rem;
    }
  }
  .num {
    display: flex;
    justify-content: space-between;
  }
}
.van-button--info {
  color: #434343;
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  margin-left: 8px;
  margin-top: 6px;
}
.van-icon__image {
  width: 2em;
  height: 5em;
  object-fit: contain;
}
.numbox {
  padding: 0.6rem 0 0.3rem;
}
.size3 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  z-index: 666;
  .btnbox {
    display: flex;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 8px 16px;
    .btn_1 {
      border-top-left-radius: 20px !important;
      border-bottom-left-radius: 20px !important;
      width: 100%;
      height: 45px;
      font-weight: 500;
      font-size: 16px;
      border: none;
      border-radius: 0;
      background: linear-gradient(to right, #ffd01e, #ff8917);
    }
    .btn_2 {
      border-top-right-radius: 20px !important;
      border-bottom-right-radius: 20px !important;
      width: 100%;

      height: 45px;
      font-weight: 500;
      font-size: 16px;
      border: none;
      border-radius: 0;
      background: linear-gradient(to right, #ff6034, #ee0a24);
    }
  }
}
.van-goods-action {
  z-index: 555;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.imgitem img {
  width: 23.4375rem;
  height: 19.8125rem;
}
.btnitm button {
  margin-top: 7px;

  padding: 5px;
}

.selected {
  background: #fcedeb;
  border: 1px solid #f2270c;

  color: #f2270c;
  font-weight: 700;
}
</style>